import React, {memo,useState, useEffect, useRef,useCallback} from 'react'
import {shallowEqual,useDispatch,useSelector} from 'react-redux'
import { 
  getSearchSongListAction,
  changeFocusStateAction 
} from './store/actionCreator'
import { HeaderLeft, HeaderWrapper ,HeaderRight } from './style'
import { headerLinks } from '@/common/local-data'
import { NavLink } from 'react-router-dom'
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons'
import { debounce } from '../../utils/format-utils'


function FAppHeader(props){
  
  const [value,setValue] = useState('');

  const showSelectItem = (item,index)=>{
    if(index < 3){
      return (
        <NavLink
          key={item.title}
          to={item.link}
          activeClassName="link-active"
          className="header-item"
        >
          <em>{item.title}</em>
          <i className="icon"></i>
        </NavLink>
      )
    }else{
      return(
        <a href={item.link} key={item.title} className="header-item">
          {item.title}
        </a>
      )
    }
  }

  const dispatch = useDispatch();
  const {  searchSongList,focusState }= useSelector(
    (state) => ({
      searchSongList: state.getIn(['themeHeader', 'searchSongList']),
      focusState:state.getIn(['themeHeader','focusState'])
    }),
    shallowEqual
  )

  const inputRef = useRef()
  useEffect(() => {
    // 获取焦点
    if(focusState) inputRef.current.focus()
    // 失去焦点
    else inputRef.current.blur()
  }, [focusState])


  const changeInuput  =debounce((target)=>{

    let value = target.value.trim()
    if (value.length < 1) return
    // 显示下拉框
    dispatch(changeFocusStateAction(true))
    dispatch(getSearchSongListAction(value))
  },500)



  const handleFocus = useCallback(
    () => {
      dispatch(changeFocusStateAction(true))
    },
    [dispatch],
  )

  return(
    <HeaderWrapper>
      <div className="content w1100">
        <HeaderLeft>
          <h1>
            <a href="/#" className="logo">
              网易云音乐
            </a>
          </h1>
          <div className="header-group">
            {headerLinks.map((item,index)=>{
              return showSelectItem(item,index)
            })}
          </div>
        </HeaderLeft>  
        <HeaderRight>
          <div className="search-wrapper">
            <Input 
              ref={inputRef}
              className="search"
              placeholder="音乐/歌手" 
              prefix={<SearchOutlined />}
              value={value}
              onFocus={handleFocus}
              onInput={({target})=>changeInuput(target)}
              onChange = {(e)=>setValue(e.target.value)}
            />
          
            <div className="down-slider"
              style={{display:focusState ? 'block' : 'none'}}>
                <div className="search-header">
                  <span className="discover">搜"歌曲"相关用户&gt;</span>
                </div>
                <div className="content">
                  <div  className="zuo">
                    <span className="song">单曲</span>
                  </div>
                  <span className="main">
                    {searchSongList &&
                    searchSongList.map((item)=>{
                      return (
                        <div
                          className="item"
                          key={item.id}
                        >
                        <span>{item.name}</span>-{item.artists[0].name}
                      </div>
                      )
                    })}
                  </span>
                </div>
            </div>
          </div>
          <div className="center">创作者中心</div>
          <div>登录</div>
        </HeaderRight>
      </div>
    </HeaderWrapper>
  )
}

export default memo(FAppHeader)